<template>
  <el-container>
    <el-header>
      <el-button @click="$router.push('/')">返回首页</el-button>
    </el-header>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card>
            <h2>{{ article.title }}</h2>
            <div v-html="article.content"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <h3>目录</h3>
            <ul>
              <li v-for="(item, idx) in article.toc" :key="idx">{{ item }}</li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import api from '../api'

const route = useRoute()
const article = ref({ title: '', content: '', toc: [] })

onMounted(async () => {
  const res = await api.get(`/articles/${route.params.id}`)
  article.value = res.data.result
})
</script>
